<template>
  <div id="app">
    <!-- 顶部header区域 -->
    <el-row>
      <el-col :span="24">
        <div class="header">
          <p>广东青年职业学院网络数据中心</p>
          <p>
            <a @click="goLogin">管理员登录</a>
          </p>
        </div>
      </el-col>
    </el-row>
    <!-- 导航栏 -->
    <div class="max-nav">
      <el-row :gutter="0">
        <el-col :xs="{span:24,offset:0}" :sm="{span:8,offset:0}">
          <div class="gqing"></div>
        </el-col>
        <el-col :xs="{span:24,offset:0}" :sm="{span:11,offset:5}">
          <div class="nav">
            <el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal">
              <el-menu-item index="/home" @click="goHome">
                <a>首页</a>
              </el-menu-item>
              <el-menu-item index="/noticelist" @click="goNoticelist">
                <a>公告通知</a>
              </el-menu-item>
              <el-menu-item index="/service" @click="goService">
                <a>服务中心</a>
              </el-menu-item>
              <el-menu-item index="/help" @click="goHelp">
                <a>规章制度</a>
              </el-menu-item>
              <el-menu-item index="/about" @click="goAbout">
                <a>关于我们</a>
              </el-menu-item>
            </el-menu>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- banner -->
    <el-row>
      <el-col class="banner-top" :span="24">
        <img class="banner" src="./assets/images/banner.jpg" />
      </el-col>
      <el-col class="bar" :span="24">
        <p>广东青年职业学院|网络数据中心服务平台为你提供优质的服务</p>
      </el-col>
    </el-row>

    <!-- 中间路由展示区域 -->
    <router-view v-if="!$route.meta.keepalive"></router-view>

    <keep-alive>
      <router-view v-if="$route.meta.keepalive"></router-view>
    </keep-alive>

    <!-- 底部footer区域 -->
    <el-row>
      <el-col :span="24">
        <div class="footer">
          <p>Copyright ©2019 by 广东青年职业学院</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    //编程式导航，重复点击当前路由会返回一个错误信息，可以使用catch捕获，并可在里面添加事件方法
    goHome() {
      this.$router.push({ path: "/home" });
    },
    goNoticelist() {
      this.$router.push({ path: "/noticelist" });
    },
    goService() {
      this.$router.push({ path: "/service" });
    },
    goHelp() {
      this.$router.push({ path: "/help" });
    },
    goAbout() {
      this.$router.push({ path: "/about" });
    },
    goLogin() {
      if (this.$store.state.token && this.$store.state.past === false) {
        this.$router.push({ path: "/manage" });
      } else {
        this.$router.push({ path: "/login" });
      }
    }
  }
};
</script>

<style lang="scss">
.el-message-box {
  //弹出提示框大小
  width: 320px !important;
}
* {
  margin: 0;
  padding: 0;
}
a {
  color: black;
  text-decoration: none;
}
img {
  width: 100%;
  height: auto;
}
.gqing {
  width: 100%;
  height: 60px;
  background: url(./assets/images/gqing.jpg) 100% 50% / contain no-repeat scroll;
}
#app {
  overflow-x: hidden;
  font-family: "微软雅黑";
}
.header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding-left: 4%;
  padding-right: 4%;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  height: 20px;
  line-height: 20px;
  color: #909399;
  p {
    a {
      cursor: pointer;
      color: #909399;
    }
    a:hover {
      color: black;
    }
  }
}
/*导航栏移动端响应式*/
.max-nav {
  max-width: 1200px;
  margin: 0 auto;
  #zhanbtn {
    background-color: #fff;
    width: 90%;
    padding: 0px;
    margin-top: 6px;
    border: none;
  }
}
.nav {
  margin-bottom: 2px;
  width: 100%;
  ul {
    li {
      width: 20%;
      padding: 0;
      text-align: center;
      a {
        font-size: 1.15em;
      }
    }
    li:nth-child(1) {
      width: 17%;
    }
  }
}

.el-menu.el-menu--horizontal {
  border-bottom: none !important;
  display: flex;
  flex-flow: nowrap;
}
.banner-top {
  margin-top: -4px;
}
.bar {
  background-color: #eee;
  font-size: 12px;
  line-height: 26px;
  margin-top: -4px;
  padding-left: 4%;
  color: #909399;
}
.footer {
  width: 100%;
  height: 80px;
  background-color: #0075a9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  color: #fff;
  ul {
    width: 300px; //兼容ie居中
    margin: 0 auto;
    li {
      float: left;
      list-style: none;
      a {
        margin: 4px;
        color: #fff;
      }
    }
  }
  p {
    margin-top: 4px;
  }
}
</style>
